<template>
  <MesBox
    v-model="model"
    :lazy="true"
    title="选择设备"
    :height="700"
    :width="1500"
    :padding="15"
  >
    <!-- 设置查询条件 -->
    <div style="padding-bottom: 10px">
      <span style="margin-right: 10px;">设备编码：</span>
      <el-input
      
        placeholder="请输入设备编码"
        style="width: 200px"
        v-model="deviceCode"
      />
      <span style="margin-right: 10px;margin-left: 20px;">设备名称：</span>
      <el-input
      
        placeholder="请输入设备名称"
        style="width: 200px"
        v-model="deviceName"
      />
      <el-button
        type="primary"
        style="margin-left:20px"
        size="medium"
        @click="search"
        ><i class="el-icon-search"></i>搜索</el-button
      >
     
    </div>

    <!-- imes-table配置的这些属性见MesTable组件api文件 -->
    <mes-table
      ref="mytable"
      :loadKey="true"
      :columns="columns"
      :pagination="pagination"
      :pagination-hide="false"
      :max-height="600"
      :url="url"
      :index="true"
      :single="false"
      :defaultLoadPage="defaultLoadPage"
      @loadBefore="loadTableBefore"
      @loadAfter="loadTableAfter"
    ></mes-table>
    <!-- 设置弹出框的操作按钮 -->
    <template #footer>
      <div>
        <el-button
          size="mini"
          type="primary"
          @click="addRow()"
          ><i class="el-icon-plus"></i>添加选择的数据</el-button
        >
        <el-button size="mini" @click="model = false"
          ><i class="el-icon-close"></i>关闭</el-button
        >
      </div>
    </template>
  </MesBox>
</template>
<script>
import MesBox from "@/components/basic/MesBox.vue";
import MesTable from "@/components/basic/MesTable.vue";
import { thisTypeAnnotation } from "@babel/types";
export default {
  components: {
      MesBox: MesBox,
      MesTable: MesTable,
  },
  data() {
    return {
      model: false,
      defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
      deviceCode: "", //查询条件字段
      deviceName: "", //查询条件字段
      modelType:"",
      url: "api/MachineTool/GetPageData",//加载数据的接口
      columns: [
              {field:'DeviceCode',title:'设备编号',type:'string',width:120,sort:true,align:'left'},
                {field:'DeviceName',title:'设备名称',type:'string',width:120,align:'left',sort:true},
                {field:'DeviceState',title:'设备状态',type:'string',width:120,align:'left'},
                {field:'DevicePicture',title:'设备图片',type:'img',width:110,align:'left'},
                
      ],
      pagination: {}, //分页配置，见mestable组件api
    };
  },
  methods: {
    open() {
      this.model = true;
      //打开弹出框时，加载table数据
      this.$nextTick(() => {
        this.$refs.mytable.load();
      });
    },
    openPaper(type) {
      this.modelType = type;
      this.model = true;
      //打开弹出框时，加载table数据
      this.$nextTick(() => {
        this.$refs.mytable.load();
      });
    },
    search() {
      //点击搜索
      this.$refs.mytable.load();
    },
    getFieldDicValue(fieldName,fieldValue){
      this.columns.forEach(item => {
        if (item.field == fieldName) {
          var result =  item.bind.data.find(val => val.key == fieldValue)
          return result;
        }
      })
    },
    addRow() {
      var rows = this.$refs.mytable.getSelected();
      if (!rows || rows.length == 0) {
        return this.$message.error("请选择行数据");
      }
      if(this.modelType=="MaintainPaperId" && rows.length >1 )
      {
        return this.$message.error("请选择一条数据");
      }
      this.model = false;
         //获取回写到明细表的字段
      let _rows = rows.map((row) => {
          return {
            DeviceCode: row.DeviceCode,
            DeviceName: row.DeviceName,
            DeviceState: row.DeviceState,
            DevicePicture: row.DevicePicture,
          };
      });
      if(this.modelType=="QualityTestPlanId")
      {
        //回写数据到表单
        this.$emit("parentCall", ($parent) => {
          $parent.setTable1Rows(this.modelType,_rows);
        });
      }
      else
      {
        this.$parent.setTable1Rows(this.modelType,_rows);
      }
     
      ///this.$refs.table1.rowData.unshift(..._rows);
      // this.$emit('parentCall', ($parent) => {
      //   console.log($parent);
      //   $parent.$refs.table1.rowData.unshift(..._rows);
      // });
      //关闭当前窗口
      
    },
    //这里是从api查询后返回数据的方法
    loadTableAfter(row) {},
    loadTableBefore(params) {
      //查询前，设置查询条件
      if (this.deviceCode) {
        params.wheres.push({ name: "DeviceCode", value: this.deviceCode, displayType:"like"});
      }
      if (this.deviceName) {
        params.wheres.push({ name: "DeviceName", value: this.deviceName, displayType:"like"});
      }
      return true;
    },
  },
};
</script>
